<template>
    <div>
        <el-card class="box-card" style="margin-bottom: 15px;">
            <CategorySelect @getCategoryId="getCategoryId" :show="!isShowTable"></CategorySelect>
        </el-card>
        <el-card class="box-card">
            <div v-show="isShowTable">
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addAttr">添加属性</el-button>
                <el-table :data="attrList" style="width: 100%" border>
                    <el-table-column label="序号" width="80" align="center" type="index">
                    </el-table-column>
                    <el-table-column prop="attrName" label="属性名称" width="150"></el-table-column>
                    <el-table-column prop="prop" label="属性值列表">
                        <template slot-scope="{row, $index}">
                            <el-tag type="success" v-for="(attr, index) in row.attrValueList" :key="attr.id"
                                style="margin: 5px 5px">{{
                                    attr.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="150">
                        <template slot-scope="{row, $index}">
                            <el-button size="mini" type="warning" icon="el-icon-edit"
                                @click="updateAttr(row)"></el-button>
                            <el-popconfirm :title="`确定删除${row.attrName}这个属性吗？`" @onConfirm="deleteAttr(row, $index)">
                                <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete"
                                    style="margin-left: 15px;"></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="!isShowTable">
                <el-form :inline="true" ref="form" label-width="80px" :model="attrInfo">
                    <el-form-item label="属性名">
                        <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="el-icon-plus" :disabled="!attrInfo.attrName"
                    @click="addAttrValue">添加属性值</el-button>
                <el-button @click="isShowTable = true">取消</el-button>
                <el-table style="width: 100%;margin: 20px 0" border :data="attrInfo.attrValueList">
                    <el-table-column align="center" type="index" prop="prop" label="序号" width="80"></el-table-column>
                    <el-table-column prop="prop" label="属性值名称">
                        <template slot-scope="{row, $index}">
                            <el-input v-if="row.flag" @blur="toLook(row)" @keyup.native.enter="toLook(row)"
                                v-model="row.valueName" placeholder="请输入属性值名称" size="mini" :ref="$index"></el-input>
                            <span @click="toEdit(row, $index)" style="display: block;" v-else>{{ row.valueName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop" label="操作">
                        <template slot-scope="{row, $index}">
                            <el-popconfirm :title="`确定删除${row.valueName}吗？`" @onConfirm="deleteAttrValue($index)">
                                <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" @click="addOrUpdateAttr"
                    :disabled="attrInfo.attrValueList.length < 1">保存</el-button>
                <el-button @click="isShowTable = true">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
// 引入lodash中的深拷贝做数据拷贝、
import cloneDeep from 'lodash/cloneDeep';
export default {
    name: 'Attr',
    data() {
        return {
            category1Id: '',
            category2Id: '',
            category3Id: '',
            attrList: [],
            isShowTable: true,
            attrInfo: {
                attrName: "",
                attrValueList: [
                    // {
                    //     attrId: 0,
                    //     valueName: ""
                    // }
                ],
                categoryId: 0,// category3Id
                categoryLevel: 3,
            }
        }
    },
    methods: {
        getCategoryId({ categoryId, level }) {
            if (level == 1) {
                this.category1Id = categoryId
                this.category2Id = ''
                this.category3Id = ''
            } else if (level == 2) {
                this.category2Id = categoryId
                this.category3Id = ''
            } else if (level == 3) {
                this.category3Id = categoryId
                this.getAttrList()
            }
        },
        async getAttrList() {
            const { category1Id, category2Id, category3Id } = this
            let res = await this.$API.attr.reqAttrInfoList(category1Id, category2Id, category3Id)
            if (res.code == 200) {
                this.attrList = res.data
            }
        },
        addAttrValue() {
            this.attrInfo.attrValueList.push({
                attrId: this.attrInfo.id,
                valueName: '',
                flag: true
            })
            this.$nextTick(() => {
                this.$refs[this.attrInfo.attrValueList.length - 1].focus()
            })
        },
        addAttr() {
            this.isShowTable = false
            this.attrInfo = {
                attrName: "",
                attrValueList: [],
                categoryId: this.category3Id,
                categoryLevel: 3,
            }
        },
        updateAttr(row) {
            this.isShowTable = false
            this.attrInfo = cloneDeep(row)
            this.attrInfo.attrValueList.forEach(item => {
                this.$set(item, 'flag', false)
            })
        },
        toLook(row) {
            if (row.valueName.trim() == '') {
                this.$message({ type: 'warning', message: '请输入一个属性值' })
                return
            }
            let isRepat = this.attrInfo.attrValueList.some(item => {
                if (row != item) {
                    return row.valueName == item.valueName
                }
            })

            if (isRepat) {
                this.$message({ type: 'warning', message: '不能输入一个重复的属性值' })
                return
            }
            row.flag = false
        },
        toEdit(row, index) {
            row.flag = true
            // 点击span时切换为input时，对于浏览器而言，使用v-if时页面的重绘是需要时间的
            this.$nextTick(() => {
                this.$refs[index].focus()
            })
        },
        deleteAttrValue(index) {
            // 这个删除操作是不需要发送请求的
            this.attrInfo.attrValueList.splice(index, 1)
        },
        // 添加或修改属性的操作
        async addOrUpdateAttr() {
            this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item => {
                if (item.valueName != '') {
                    delete item.flag
                    return true
                }
            })
            try {
                await this.$API.attr.reqAddAttr(this.attrInfo)
                this.$message({ type: 'success', message: '保存成功' })
                this.getAttrList()
                this.isShowTable = true
            } catch (error) {
                this.$message({ type: 'warning', message: '保存失败' })
            }

        },
        // 删除属性
        async deleteAttr(row, index) {
            try {
                let res = await this.$API.attr.reqDeleteAttr(row.id)
                if (res.code == 200) {
                    this.$message({ type: 'success', message: '删除成功' })
                    this.getAttrList()
                }
            } catch (error) {
                this.$message({ type: 'warning', message: '删除属性失败' })
            }
        }
    }
}

// let obj = {
//     "code": 200,
//     "message": "成功",
//     "data": [
//         {
//             "id": 106,
//             "attrName": "手机系统",
//             "categoryId": 2,
//             "categoryLevel": 1,
//             "attrValueList": [
//                 {
//                     "id": 176,
//                     "valueName": "安卓手机",
//                     "attrId": 106
//                 },
//                 {
//                     "id": 175,
//                     "valueName": "苹果手机",
//                     "attrId": 106
//                 }
//             ]
//         },
//         {
//             "id": 107,
//             "attrName": "电池容量",
//             "categoryId": 13,
//             "categoryLevel": 2,
//             "attrValueList": [
//                 {
//                     "id": 178,
//                     "valueName": "1200mAh到3000mAh",
//                     "attrId": 107
//                 },
//                 {
//                     "id": 177,
//                     "valueName": "1200mAh以下",
//                     "attrId": 107
//                 },
//                 {
//                     "id": 179,
//                     "valueName": "3000mAh以上",
//                     "attrId": 107
//                 }
//             ]
//         },
//         {
//             "id": 105,
//             "attrName": "品牌",
//             "categoryId": 62,
//             "categoryLevel": 3,
//             "attrValueList": [
//                 {
//                     "id": 174,
//                     "valueName": "国外",
//                     "attrId": 105
//                 },
//                 {
//                     "id": 172,
//                     "valueName": "国内",
//                     "attrId": 105
//                 }
//             ]
//         }
//     ],
//     "ok": true
// }
</script>

<style></style>